<template>
<div style="width: 100%">
  <a-card class="card" :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="vertical">
        <a-row :gutter="48">
          <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
            <a-form-item label="姓名">
              <a-input placeholder="请输入..." v-model="queryParam.ksxm"/>
            </a-form-item>
          </a-col>
          <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
            <a-form-item label="报名号">
              <a-input placeholder="请输入..." v-model="queryParam.ksbmh"/>
            </a-form-item>
          </a-col>
          <template v-if="advanced">
          <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
            <a-form-item label="缴费状态">
              <a-select :allowClear="true" showSearch optionFilterProp="children" v-model="queryParam.jfzt">
                <a-select-option v-for="i in stateList" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
            <a-form-item label="招生年度">
              <a-select :allowClear="true" showSearch optionFilterProp="children" v-model="queryParam.zsnj">
                <a-select-option v-for="i in TYPE0126" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :sm="{span:24}" :lg="{span:12}" :xl="{span:6}">
            <a-form-item label="证件号码">
              <a-input placeholder="请输入..." v-model="queryParam.zjhm"/>
            </a-form-item>
          </a-col>
          </template>
          <a-col :sm="{span:16}" :xl="{span:8}" style="padding-top: 29px;">
            <a-button type="primary" @click="loadData">查询</a-button>
            <a-button type="primary" @click="handleExport">导出excel</a-button>
            <a-button type="primary" @click="handleExportDBF">导出DBF</a-button>
            <a-button type="primary" @click="handleBatch" :disabled="batchAble">{{titleShow}}</a-button>
            <a @click="advanced = !advanced" style="margin-left: 8px">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'"/>
              </a>
          </a-col>
        </a-row>
      </a-form>
    </div>
    </a-card>
    <!-- <a-card class="card" :bordered="false">
      <a-row :gutter="48">
        <a-col :xs="{span:24}" :sm="{span:12}" :xl="{span:16}">
          <div>
            <a-upload
              :fileList="fileList"
              :remove="handleRemove"
              :beforeUpload="beforeUpload"
            >
              <a-button type="primary" >选择文件</a-button>
              <a-button
                type="primary"
                @click.stop="handleImport"
                :disabled="fileList.length === 0"
                :loading="uploading"
              >
                {{uploading ? 'Uploading' : '导入' }}
              </a-button>
            </a-upload>
          </div>
          </a-col>
          <a-col :xs="{span:24}" :sm="{span:12}" :xl="{span:8}" style="text-align:right">

            <a-button type="primary" @click="handleDownLoad">模版下载</a-button>
          </a-col>
      </a-row>
  </a-card> -->
   <!-- <a-alert class="card"  message="温馨提示：导入数据前,请先根据查询条件下载数据模板,填写完准考号后再上传" banner /> -->

    <a-card class="card" :bordered="false">
    <a-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :loading="loading"
      :dataSource="data"
      :scroll="{ x: 1500 }"
      :alert="options.alert"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      :pagination="pagination"
			@change="handleTableChange"
    >
    <template slot="action" slot-scope="text,record">
        <a v-if="record.jfzt=='已缴费'" @click="handleConfirm(record.id,record.jfzt)">撤销缴费</a>
        <a v-else @click="handleConfirm(record.id,record.jfzt)">缴费</a>
       
      </template>
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
    </a-table>
   
    </a-card>
</div>
</template>

<script>

// import moment from 'moment'
import { STable } from '~'
import { mapState } from 'vuex'

const selectArr = ['TYPE0126', 'TYPE0075', 'TYPE0125', 'TYPE0072']

export default {
  components: {
    STable

  },
  data () {
    return {
      advanced: true,
       fileList: [],
      uploading: false,
      confirmHandleVisiable: false,
      loading: false,
      data: [],
      batchAble:true,
      // 查询参数
      queryParam: {
        ksbmh:'',
        ksxm:'',
        qrzt:'',
        zjhm:'',
        zsnj:''
      },
      postParams: {},
      // 表头
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '报名号',
          dataIndex: 'ksbmh'
        },
        {
          title: '姓名',
          dataIndex: 'ksxm'
        },
        {
          title: '报考导师',
          dataIndex: 'bkdsyxm'
        },
        {
          title: '报考院系',
          dataIndex: 'bkyxsmc'
        },
        {
          title: '报考专业',
          dataIndex: 'bkzymc'
        },
        {
          title: '证件号码',
          dataIndex: 'zjhm'
        },
        {
          title: '缴费状态',
          dataIndex: 'jfzt'
        },
        {
          title: '操作',
          dataIndex: 'cz',
          fixed: 'right',
          width: 120,
          scopedSlots: { customRender: 'action' }
        }
      ],
      selectMenu: {
        yx: [] // 院系
      },
      editItemData: null,
      pagination: {
					current: 1
        },
      stateList:[
        {
          code:0,
          name:'未缴费'
        },
        {
          code:1,
          name:'已缴费'
        }
      ],
       options: {
        alert: { show: false }
      },
      selectedRowKeys: [],
      selectedRows:'',
    }
  },
  computed: {
    ...mapState({
      systemInfo: state => state.app.systemInfo,
      TYPE0126: state => state.app['TYPE0126'] // 年级
    }),
    titleShow(){
      if(this.queryParam.jfzt == '1'){
        return '批量撤销缴费'
      }else {
        return '批量缴费'
      }
    }
  },
  created () {
    this.initSelectMenu()
    selectArr.forEach(v => {
      this.$store.dispatch('app/setDictionary', v)
    })
  },
  methods: {
    initSelectMenu () {
      let allRequest = [
        this.$api.base.collegeAll()
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          yx: res[0].data
        }
      })
       this.$api.base.getSchoolYear().then(res=>{
        this.queryParam.zsnj=res.data.doctoralAdmissionYear
        this.loadData({
      pageNum:1,
      pageSize:10
    })
    })
    },
      // 加载数据
     loadData(parameter = {}) {
       if(!parameter.pageNum){
         this.pagination.current = 1
         parameter.pageNum = 1
       }
       if(this.queryParam.jfzt == '0' || this.queryParam.jfzt == '1'){
         this.batchAble = false
       }else {
         this.batchAble = true
       }
      let params = Object.assign(this.queryParam, parameter)
      this.loading = true;
      this.$api.doctorRecruit.payList(params).then(res => {
        // console.log(res)
         const pagination = { ...this.pagination
        };
        pagination.total = 0
        if (res.data && res.data.total) {
          pagination.total = res.data.total;
        }
        this.data = []
        this.pagination = pagination;
        if (res.data && res.data.rows.length) {
          this.data = res.data.rows;
           this.data.forEach(item=>{
           if(item.jfzt=='1'){
              item.jfzt='已缴费'
            }else{
              item.jfzt='未缴费'
            }
          })
        }
        this.loading = false;
      })
    },
    // 分页
			handleTableChange(pagination, filters, sorter) {
				console.log(pagination);
				const pager = { ...this.pagination
				};
				pager.current = pagination.current;
				this.pagination = pager;
				this.loadData({
					pageSize: 10,
					pageNum: pagination.current
				});
			},
    // 导出
    handleExport () {
      this.$export('admissions/bsksbmxx/exportJFEX', this.queryParam)
    },
    // 导出PDF
    handleExportDBF () {
       this.$export('admissions/bsksbmxx/exportJFDBF', this.queryParam)
    },
    // 现场确认
    handleConfirm (id,jfzt) {
      let params ={}
      let arr = [id]
      if(jfzt=='未缴费'){
           params ={
            ids:arr,
            jfzt:'1'
          }
      }else{
       params ={
        ids:arr,
        jfzt:'0'
        }
      }
      this.$api.doctorRecruit.payId(params).then( res => {
        this.$message.success(res.msg)
        this.loadData({
					pageSize: 10,
					pageNum: this.pagination.current
				});
      })

    },
    // 关闭窗口
    handleCloseConfirm () {
      this.confirmHandleVisiable = false
      this.loadData({
        pageNum:this.pagination.current,
        pageSize:10
      })
    },
    handleRemove (file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    beforeUpload (file) {
      this.fileList = [...this.fileList, file]
      return false
    },
    // 导入
    handleImport () {
      const { fileList } = this
      const formData = new FormData()
      fileList.forEach((file) => {
        formData.append('file', file)
      })
      this.uploading = true
      this.$upload('admissions/bsksbmxx/sczkzhUpload',formData).then( res => {
        this.uploading = false
        this.$message.success('导入成功')
      }).finally(()=>{
        this.uploading = false
      })
      console.log('开始导入')
    },
    // 下载模版
    handleDownLoad () {
      console.log('下载模版')
      this.$export('admissions/bsksbmxx/exportExcel',this.queryParam)
    },
    onSelectChange (selectedRowKeys,selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows=selectedRows;
      console.log(selectedRowKeys)
    },
    handleBatch () {
      let _this=this,params,title,warnTitle;
      if(this.queryParam.jfzt == '0'){
           params ={
            ids:_this.selectedRowKeys,
            jfzt:'1'
          }
          title='确定缴费吗'
          warnTitle = '请选择需要缴费的信息'
        }else{
          params ={
            ids:_this.selectedRowKeys,
            jfzt:'0'
          }
          title='确定撤销缴费吗'
          warnTitle = '请选择需要撤销缴费的信息'
        }
      if (!_this.selectedRowKeys.length) {
        _this.$message.warning(warnTitle)
        return
      }
      
      this.$confirm({
         title: title,
         onOk() {
      _this.$api.doctorRecruit.payId(params).then(res=>{
        console.log(res.status)
        if (res.status == '1') {
           _this.selectedRowKeys = [];
          _this.loadData({
					pageSize: 10,
					pageNum: _this.pagination.current
        });
        _this.$message.success(res.msg)

        }else{
          _this.$message.warning(res.msg)
        }
      })
         },
         onCancel() {
           console.log('Cancel');
         },
         class: 'test',
       });

    },
  }
}
</script>

<style lang="less" scoped>
.card{
  margin-bottom: 20px;
}
</style>
